<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>校园图书管理系统</title>
    <style>
        * {
            box-sizing: border-box;
        }

        body {
            font-family: 'Microsoft YaHei', sans-serif;
            margin: 0;
            background-color: #e6f7ff;
        }

        .header {
            background-color: #0050b3;
            color: white;
            text-align: center;
            padding: 20px;
            border-radius: 0 0 10px 10px;
        }

        .nav {
            background-color: #3385ff;
            display: flex;
            justify-content: center;
            border-radius: 10px;
            margin: 10px;
        }

        .nav button {
            background-color: transparent;
            border: none;
            color: white;
            padding: 15px 20px;
            cursor: pointer;
            transition: background-color 0.3s;
            border-radius: 10px;
        }

        .nav button:hover {
            background-color: #0050b3;
        }

        .nav button.active {
            background-color: #003a8c;
        }

        .main {
            padding: 20px;
        }

        .tab-content {
            display: none;
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            margin-top: 10px;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }

        th,
        td {
            border: 1px solid #ddd;
            padding: 12px;
            text-align: left;
        }

        th {
            background-color: #f0f6ff;
        }

        button {
            padding: 8px 16px;
            border-radius: 20px; /* 调整按钮形状 */
            border: none;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .add-btn {
            background-color: #52c41a;
            color: white;
        }

        .add-btn:hover {
            background-color: #389e0d;
        }

        .edit-btn {
            background-color: #faad14;
            color: white;
        }

        .edit-btn:hover {
            background-color: #d48806;
        }

        .delete-btn {
            background-color: #ff4d4f;
            color: white;
        }

        .delete-btn:hover {
            background-color: #cf1322;
        }

        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.4);
        }

        .modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 30%;
            border-radius: 8px;
        }

        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }

        /* 新增搜索框样式 */
        .search-container {
            margin-bottom: 10px;
        }

        .search-container input[type="text"] {
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }

        .search-container button {
            padding: 8px 16px;
            border-radius: 20px; /* 调整按钮形状 */
            border: none;
            background-color: #0050b3;
            color: white;
            cursor: pointer;
        }

        .search-container button:hover {
            background-color: #003a8c;
        }
    </style>
</head>

<body>
    <div class="header">
        <h1>校园图书管理系统</h1>
    </div>
    <div class="nav">
        <button class="tablinks" onclick="openTab(event, 'Home')">首页</button>
        <button class="tablinks" onclick="openTab(event, 'BookManagement')">图书信息管理</button>
        <button class="tablinks" onclick="openTab(event, 'BorrowManagement')">借阅信息管理</button>
        <button class="tablinks" onclick="openTab(event, 'ReaderManagement')">读者信息管理</button>
        <!-- 新增两个功能模块的按钮 -->
        <button class="tablinks" onclick="openTab(event, 'AnnouncementManagement')">公告管理</button>
        <button class="tablinks" onclick="openTab(event, 'MemberLevelManagement')">会员等级管理</button>
    </div>
    <div class="main">
        <div id="Home" class="tab-content">
            <h2>首页</h2>
            <!-- 新增数据统计区域 -->
            <div id="statistics">
                <h3>数据统计</h3>
                <p>图书总数: <span id="bookCount">0</span></p>
                <p>借阅记录总数: <span id="borrowCount">0</span></p>
                <p>读者总数: <span id="readerCount">0</span></p>
            </div>
            <canvas id="myChart" width="400" height="200"></canvas>
        </div>
        <div id="BookManagement" class="tab-content">
            <h2>图书信息管理</h2>
            <!-- 新增搜索框 -->
            <div class="search-container">
                <input type="text" id="bookSearch" placeholder="搜索图书名称">
                <button onclick="searchBooks()">搜索</button>
            </div>
            <button class="add-btn" onclick="openAddBookModal()">添加图书</button>
            <table id="bookTable">
                <thead>
                    <tr>
                        <th>图书名称</th>
                        <th>作者</th>
                        <th>ISBN</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
        <div id="BorrowManagement" class="tab-content">
            <h2>借阅信息管理</h2>
            <!-- 新增搜索框 -->
            <div class="search-container">
                <input type="text" id="borrowSearch" placeholder="搜索借阅人或图书名称">
                <button onclick="searchBorrows()">搜索</button>
            </div>
            <button class="add-btn" onclick="openAddBorrowModal()">添加借阅记录</button>
            <table id="borrowTable">
                <thead>
                    <tr>
                        <th>借阅人</th>
                        <th>图书名称</th>
                        <th>借阅日期</th>
                        <th>归还日期</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
        <div id="ReaderManagement" class="tab-content">
            <h2>读者信息管理</h2>
            <!-- 新增搜索框 -->
            <div class="search-container">
                <input type="text" id="readerSearch" placeholder="搜索读者姓名">
                <button onclick="searchReaders()">搜索</button>
            </div>
            <button class="add-btn" onclick="openAddReaderModal()">添加读者</button>
            <table id="readerTable">
                <thead>
                    <tr>
                        <th>读者姓名</th>
                        <th>联系方式</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
        <!-- 新增公告管理模块 -->
        <div id="AnnouncementManagement" class="tab-content">
            <h2>公告管理</h2>
            <button class="add-btn" onclick="openAddAnnouncementModal()">添加公告</button>
            <table id="announcementTable">
                <thead>
                    <tr>
                        <th>公告标题</th>
                        <th>公告内容</th>
                        <th>发布时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
        <!-- 新增会员等级管理模块 -->
        <div id="MemberLevelManagement" class="tab-content">
            <h2>会员等级管理</h2>
            <button class="add-btn" onclick="openAddMemberLevelModal()">添加会员等级</button>
            <table id="memberLevelTable">
                <thead>
                    <tr>
                        <th>会员等级</th>
                        <th>可借阅数量</th>
                        <th>借阅时长</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>

    <!-- 添加图书模态框 -->
    <div id="addBookModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeAddBookModal()">&times;</span>
            <h3>添加/修改图书</h3>
            <label for="bookName">图书名称:</label>
            <input type="text" id="bookName" placeholder="请输入图书名称">
            <br>
            <label for="bookAuthor">作者:</label>
            <input type="text" id="bookAuthor" placeholder="请输入作者">
            <br>
            <label for="bookISBN">ISBN:</label>
            <input type="text" id="bookISBN" placeholder="请输入ISBN">
            <br>
            <button onclick="saveBook()">保存</button>
        </div>
    </div>

    <!-- 添加借阅记录模态框 -->
    <div id="addBorrowModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeAddBorrowModal()">&times;</span>
            <h3>添加/修改借阅记录</h3>
            <label for="borrowerName">借阅人:</label>
            <input type="text" id="borrowerName" placeholder="请输入借阅人姓名">
            <br>
            <label for="borrowBookName">图书名称:</label>
            <input type="text" id="borrowBookName" placeholder="请输入图书名称">
            <br>
            <label for="borrowDate">借阅日期:</label>
            <input type="text" id="borrowDate" placeholder="请输入借阅日期">
            <br>
            <label for="returnDate">归还日期:</label>
            <input type="text" id="returnDate" placeholder="请输入归还日期">
            <br>
            <button onclick="saveBorrow()">保存</button>
        </div>
    </div>

    <!-- 添加读者模态框 -->
    <div id="addReaderModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeAddReaderModal()">&times;</span>
            <h3>添加/修改读者</h3>
            <label for="readerName">读者姓名:</label>
            <input type="text" id="readerName" placeholder="请输入读者姓名">
            <br>
            <label for="readerContact">联系方式:</label>
            <input type="text" id="readerContact" placeholder="请输入联系方式">
            <br>
            <button onclick="saveReader()">保存</button>
        </div>
    </div>

    <!-- 添加公告模态框 -->
    <div id="addAnnouncementModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeAddAnnouncementModal()">&times;</span>
            <h3>添加/修改公告</h3>
            <label for="announcementTitle">公告标题:</label>
            <input type="text" id="announcementTitle" placeholder="请输入公告标题">
            <br>
            <label for="announcementContent">公告内容:</label>
            <textarea id="announcementContent" placeholder="请输入公告内容"></textarea>
            <br>
            <button onclick="saveAnnouncement()">保存</button>
        </div>
    </div>

    <!-- 添加会员等级模态框 -->
    <div id="addMemberLevelModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeAddMemberLevelModal()">&times;</span>
            <h3>添加/修改会员等级</h3>
            <label for="memberLevel">会员等级:</label>
            <input type="text" id="memberLevel" placeholder="请输入会员等级">
            <br>
            <label for="borrowQuantity">可借阅数量:</label>
            <input type="number" id="borrowQuantity" placeholder="请输入可借阅数量">
            <br>
            <label for="borrowDuration">借阅时长:</label>
            <input type="number" id="borrowDuration" placeholder="请输入借阅时长（天）">
            <br>
            <button onclick="saveMemberLevel()">保存</button>
        </div>
    </div>

    <script>
        // 初始化表格
        function initTables() {
            // 图书管理
            let books = [
                { name: '《百年孤独》', author: '加西亚·马尔克斯', isbn: '9787020025795' },
                { name: '《活着》', author: '余华', isbn: '9787533923436' },
                { name: '《呐喊》', author: '鲁迅', isbn: '9787020018810' },
                { name: '《小王子》', author: '安托万·德·圣埃克苏佩里', isbn: '9787020072324' },
                { name: '《老人与海》', author: '欧内斯特·海明威', isbn: '9787020079293' },
                { name: '《简·爱》', author: '夏洛蒂·勃朗特', isbn: '9787020072270' },
                { name: '《骆驼祥子》', author: '老舍', isbn: '9787020072249' },
                { name: '《钢铁是怎样炼成的》', author: '尼古拉·奥斯特洛夫斯基', isbn: '9787020072232' },
                { name: '《鲁滨逊漂流记》', author: '丹尼尔·笛福', isbn: '9787020072225' },
                { name: '《汤姆·索亚历险记》', author: '马克·吐温', isbn: '9787020072218' }
            ];
            localStorage.setItem('books', JSON.stringify(books));
            let bookTable = document.getElementById('bookTable').getElementsByTagName('tbody')[0];
            bookTable.innerHTML = '';
            books.forEach((book, index) => {
                let row = bookTable.insertRow();
                let cell1 = row.insertCell(0);
                let cell2 = row.insertCell(1);
                let cell3 = row.insertCell(2);
                let cell4 = row.insertCell(3);
                cell1.innerHTML = book.name;
                cell2.innerHTML = book.author;
                cell3.innerHTML = book.isbn;
                cell4.innerHTML = `<button class="edit-btn" onclick="openEditBookModal(${index})">编辑</button><button class="delete-btn" onclick="deleteBook(${index})">删除</button>`;
            });

            // 借阅管理
            let borrows = [
                { borrower: '张三', bookName: '《百年孤独》', borrowDate: '2025-03-01', returnDate: '2025-03-15' },
                { borrower: '李四', bookName: '《活着》', borrowDate: '2025-03-02', returnDate: '2025-03-16' },
                { borrower: '王五', bookName: '《呐喊》', borrowDate: '2025-03-03', returnDate: '2025-03-17' },
                { borrower: '赵六', bookName: '《小王子》', borrowDate: '2025-03-04', returnDate: '2025-03-18' },
                { borrower: '孙七', bookName: '《老人与海》', borrowDate: '2025-03-05', returnDate: '2025-03-19' },
                { borrower: '周八', bookName: '《简·爱》', borrowDate: '2025-03-06', returnDate: '2025-03-20' },
                { borrower: '吴九', bookName: '《骆驼祥子》', borrowDate: '2025-03-07', returnDate: '2025-03-21' },
                { borrower: '郑十', bookName: '《钢铁是怎样炼成的》', borrowDate: '2025-03-08', returnDate: '2025-03-22' },
                { borrower: '王十一', bookName: '《鲁滨逊漂流记》', borrowDate: '2025-03-09', returnDate: '2025-03-23' },
                { borrower: '李十二', bookName: '《汤姆·索亚历险记》', borrowDate: '2025-03-10', returnDate: '2025-03-24' }
            ];
            localStorage.setItem('borrows', JSON.stringify(borrows));
            let borrowTable = document.getElementById('borrowTable').getElementsByTagName('tbody')[0];
            borrowTable.innerHTML = '';
            borrows.forEach((borrow, index) => {
                let row = borrowTable.insertRow();
                let cell1 = row.insertCell(0);
                let cell2 = row.insertCell(1);
                let cell3 = row.insertCell(2);
                let cell4 = row.insertCell(3);
                let cell5 = row.insertCell(4);
                cell1.innerHTML = borrow.borrower;
                cell2.innerHTML = borrow.bookName;
                cell3.innerHTML = borrow.borrowDate;
                cell4.innerHTML = borrow.returnDate;
                cell5.innerHTML = `<button class="edit-btn" onclick="openEditBorrowModal(${index})">编辑</button><button class="delete-btn" onclick="deleteBorrow(${index})">删除</button>`;
            });

            // 读者管理
            let readers = [
                { name: '张三', contact: '13800138001' },
                { name: '李四', contact: '13800138002' },
                { name: '王五', contact: '13800138003' },
                { name: '赵六', contact: '13800138004' },
                { name: '孙七', contact: '13800138005' },
                { name: '周八', contact: '13800138006' },
                { name: '吴九', contact: '13800138007' },
                { name: '郑十', contact: '13800138008' },
                { name: '王十一', contact: '13800138009' },
                { name: '李十二', contact: '13800138010' }
            ];
            localStorage.setItem('readers', JSON.stringify(readers));
            let readerTable = document.getElementById('readerTable').getElementsByTagName('tbody')[0];
            readerTable.innerHTML = '';
            readers.forEach((reader, index) => {
                let row = readerTable.insertRow();
                let cell1 = row.insertCell(0);
                let cell2 = row.insertCell(1);
                let cell3 = row.insertCell(2);
                cell1.innerHTML = reader.name;
                cell2.innerHTML = reader.contact;
                cell3.innerHTML = `<button class="edit-btn" onclick="openEditReaderModal(${index})">编辑</button><button class="delete-btn" onclick="deleteReader(${index})">删除</button>`;
            });

            // 公告管理
            let announcements = [
                { title: '图书归还提醒', content: '请各位读者及时归还借阅的图书。', time: '2025-03-01 10:00' },
                { title: '新图书上架', content: '一批新图书已上架，欢迎借阅。', time: '2025-03-02 11:00' },
                { title: '图书馆闭馆通知', content: '因设备维护，图书馆将于 2025-03-03 闭馆一天。', time: '2025-03-03 12:00' },
                { title: '借阅规则调整', content: '借阅期限从 15 天调整为 20 天。', time: '2025-03-04 13:00' },
                { title: '图书捐赠活动', content: '图书馆将举办图书捐赠活动，欢迎各位读者捐赠图书。', time: '2025-03-05 14:00' },
                { title: '阅读分享会', content: '将于 2025-03-06 举办阅读分享会，欢迎各位读者参加。', time: '2025-03-06 15:00' },
                { title: '电子图书资源更新', content: '电子图书资源已更新，欢迎使用。', time: '2025-03-07 16:00' },
                { title: '图书馆开放时间调整', content: '图书馆开放时间从 8:00-20:00 调整为 9:00-21:00。', time: '2025-03-08 17:00' },
                { title: '图书损坏赔偿规则', content: '请各位读者爱护图书，如有损坏将按规定赔偿。', time: '2025-03-09 18:00' },
                { title: '读者反馈渠道', content: '欢迎各位读者通过邮箱反馈意见和建议。', time: '2025-03-10 19:00' }
            ];
            localStorage.setItem('announcements', JSON.stringify(announcements));
            let announcementTable = document.getElementById('announcementTable').getElementsByTagName('tbody')[0];
            announcementTable.innerHTML = '';
            announcements.forEach((announcement, index) => {
                let row = announcementTable.insertRow();
                let cell1 = row.insertCell(0);
                let cell2 = row.insertCell(1);
                let cell3 = row.insertCell(2);
                let cell4 = row.insertCell(3);
                cell1.innerHTML = announcement.title;
                cell2.innerHTML = announcement.content;
                cell3.innerHTML = announcement.time;
                cell4.innerHTML = `<button class="edit-btn" onclick="openEditAnnouncementModal(${index})">编辑</button><button class="delete-btn" onclick="deleteAnnouncement(${index})">删除</button>`;
            });

            // 会员等级管理
            let memberLevels = [
                { level: '普通会员', borrowQuantity: 5, borrowDuration: 15 },
                { level: '银卡会员', borrowQuantity: 8, borrowDuration: 20 },
                { level: '金卡会员', borrowQuantity: 12, borrowDuration: 25 },
                { level: '钻石会员', borrowQuantity: 15, borrowDuration: 30 },
                { level: '体验会员', borrowQuantity: 2, borrowDuration: 7 },
                { level: '学生会员', borrowQuantity: 6, borrowDuration: 18 },
                { level: '教师会员', borrowQuantity: 10, borrowDuration: 22 },
                { level: '长期会员', borrowQuantity: 18, borrowDuration: 35 },
                { level: '短期会员', borrowQuantity: 4, borrowDuration: 12 },
                { level: '贵宾会员', borrowQuantity: 20, borrowDuration: 40 }
            ];
            localStorage.setItem('memberLevels', JSON.stringify(memberLevels));
            let memberLevelTable = document.getElementById('memberLevelTable').getElementsByTagName('tbody')[0];
            memberLevelTable.innerHTML = '';
            memberLevels.forEach((memberLevel, index) => {
                let row = memberLevelTable.insertRow();
                let cell1 = row.insertCell(0);
                let cell2 = row.insertCell(1);
                let cell3 = row.insertCell(2);
                let cell4 = row.insertCell(3);
                cell1.innerHTML = memberLevel.level;
                cell2.innerHTML = memberLevel.borrowQuantity;
                cell3.innerHTML = memberLevel.borrowDuration;
                cell4.innerHTML = `<button class="edit-btn" onclick="openEditMemberLevelModal(${index})">编辑</button><button class="delete-btn" onclick="deleteMemberLevel(${index})">删除</button>`;
            });

            // 更新数据统计
            document.getElementById('bookCount').textContent = books.length;
            document.getElementById('borrowCount').textContent = borrows.length;
            document.getElementById('readerCount').textContent = readers.length;
        }

        // 打开 tab 页面
        function openTab(evt, tabName) {
            let i, tabcontent, tablinks;
            tabcontent = document.getElementsByClassName('tab-content');
            for (i = 0; i < tabcontent.length; i++) {
                tabcontent[i].style.display = 'none';
            }
            tablinks = document.getElementsByClassName('tablinks');
            for (i = 0; i < tablinks.length; i++) {
                tablinks[i].className = tablinks[i].className.replace(' active', '');
            }
            document.getElementById(tabName).style.display = 'block';
            evt.currentTarget.className += ' active';
        }

        // 图书管理
        let currentBookIndex = null;

        function openAddBookModal() {
            currentBookIndex = null;
            document.getElementById('bookName').value = '';
            document.getElementById('bookAuthor').value = '';
            document.getElementById('bookISBN').value = '';
            document.getElementById('addBookModal').style.display = 'block';
        }

        function openEditBookModal(index) {
            currentBookIndex = index;
            let books = JSON.parse(localStorage.getItem('books')) || [];
            let book = books[index];
            document.getElementById('bookName').value = book.name;
            document.getElementById('bookAuthor').value = book.author;
            document.getElementById('bookISBN').value = book.isbn;
            document.getElementById('addBookModal').style.display = 'block';
        }

        function closeAddBookModal() {
            document.getElementById('addBookModal').style.display = 'none';
        }

        function saveBook() {
            let books = JSON.parse(localStorage.getItem('books')) || [];
            let name = document.getElementById('bookName').value;
            let author = document.getElementById('bookAuthor').value;
            let isbn = document.getElementById('bookISBN').value;
            if (name && author && isbn) {
                if (currentBookIndex!== null) {
                    books[currentBookIndex] = { name, author, isbn };
                } else {
                    books.push({ name, author, isbn });
                }
                localStorage.setItem('books', JSON.stringify(books));
                initTables();
                closeAddBookModal();
            }
        }

        function deleteBook(index) {
            let books = JSON.parse(localStorage.getItem('books')) || [];
            books.splice(index, 1);
            localStorage.setItem('books', JSON.stringify(books));
            initTables();
        }

        // 借阅管理
        let currentBorrowIndex = null;

        function openAddBorrowModal() {
            currentBorrowIndex = null;
            document.getElementById('borrowerName').value = '';
            document.getElementById('borrowBookName').value = '';
            document.getElementById('borrowDate').value = '';
            document.getElementById('returnDate').value = '';
            document.getElementById('addBorrowModal').style.display = 'block';
        }

        function openEditBorrowModal(index) {
            currentBorrowIndex = index;
            let borrows = JSON.parse(localStorage.getItem('borrows')) || [];
            let borrow = borrows[index];
            document.getElementById('borrowerName').value = borrow.borrower;
            document.getElementById('borrowBookName').value = borrow.bookName;
            document.getElementById('borrowDate').value = borrow.borrowDate;
            document.getElementById('returnDate').value = borrow.returnDate;
            document.getElementById('addBorrowModal').style.display = 'block';
        }

        function closeAddBorrowModal() {
            document.getElementById('addBorrowModal').style.display = 'none';
        }

        function saveBorrow() {
            let borrows = JSON.parse(localStorage.getItem('borrows')) || [];
            let borrower = document.getElementById('borrowerName').value;
            let bookName = document.getElementById('borrowBookName').value;
            let borrowDate = document.getElementById('borrowDate').value;
            let returnDate = document.getElementById('returnDate').value;
            if (borrower && bookName && borrowDate) {
                if (currentBorrowIndex!== null) {
                    borrows[currentBorrowIndex] = { borrower, bookName, borrowDate, returnDate };
                } else {
                    borrows.push({ borrower, bookName, borrowDate, returnDate });
                }
                localStorage.setItem('borrows', JSON.stringify(borrows));
                initTables();
                closeAddBorrowModal();
            }
        }

        function deleteBorrow(index) {
            let borrows = JSON.parse(localStorage.getItem('borrows')) || [];
            borrows.splice(index, 1);
            localStorage.setItem('borrows', JSON.stringify(borrows));
            initTables();
        }

        // 读者管理
        let currentReaderIndex = null;

        function openAddReaderModal() {
            currentReaderIndex = null;
            document.getElementById('readerName').value = '';
            document.getElementById('readerContact').value = '';
            document.getElementById('addReaderModal').style.display = 'block';
        }

        function openEditReaderModal(index) {
            currentReaderIndex = index;
            let readers = JSON.parse(localStorage.getItem('readers')) || [];
            let reader = readers[index];
            document.getElementById('readerName').value = reader.name;
            document.getElementById('readerContact').value = reader.contact;
            document.getElementById('addReaderModal').style.display = 'block';
        }

        function closeAddReaderModal() {
            document.getElementById('addReaderModal').style.display = 'none';
        }

        function saveReader() {
            let readers = JSON.parse(localStorage.getItem('readers')) || [];
            let name = document.getElementById('readerName').value;
            let contact = document.getElementById('readerContact').value;
            if (name && contact) {
                if (currentReaderIndex!== null) {
                    readers[currentReaderIndex] = { name, contact };
                } else {
                    readers.push({ name, contact });
                }
                localStorage.setItem('readers', JSON.stringify(readers));
                initTables();
                closeAddReaderModal();
            }
        }

        function deleteReader(index) {
            let readers = JSON.parse(localStorage.getItem('readers')) || [];
            readers.splice(index, 1);
            localStorage.setItem('readers', JSON.stringify(readers));
            initTables();
        }

        // 搜索图书
        function searchBooks() {
            let searchTerm = document.getElementById('bookSearch').value.toLowerCase();
            let books = JSON.parse(localStorage.getItem('books')) || [];
            let bookTable = document.getElementById('bookTable').getElementsByTagName('tbody')[0];
            bookTable.innerHTML = '';
            books.forEach((book, index) => {
                if (book.name.toLowerCase().includes(searchTerm)) {
                    let row = bookTable.insertRow();
                    let cell1 = row.insertCell(0);
                    let cell2 = row.insertCell(1);
                    let cell3 = row.insertCell(2);
                    let cell4 = row.insertCell(3);
                    cell1.innerHTML = book.name;
                    cell2.innerHTML = book.author;
                    cell3.innerHTML = book.isbn;
                    cell4.innerHTML = `<button class="edit-btn" onclick="openEditBookModal(${index})">编辑</button><button class="delete-btn" onclick="deleteBook(${index})">删除</button>`;
                }
            });
        }

        // 搜索借阅记录
        function searchBorrows() {
            let searchTerm = document.getElementById('borrowSearch').value.toLowerCase();
            let borrows = JSON.parse(localStorage.getItem('borrows')) || [];
            let borrowTable = document.getElementById('borrowTable').getElementsByTagName('tbody')[0];
            borrowTable.innerHTML = '';
            borrows.forEach((borrow, index) => {
                if (borrow.borrower.toLowerCase().includes(searchTerm) || borrow.bookName.toLowerCase().includes(searchTerm)) {
                    let row = borrowTable.insertRow();
                    let cell1 = row.insertCell(0);
                    let cell2 = row.insertCell(1);
                    let cell3 = row.insertCell(2);
                    let cell4 = row.insertCell(3);
                    let cell5 = row.insertCell(4);
                    cell1.innerHTML = borrow.borrower;
                    cell2.innerHTML = borrow.bookName;
                    cell3.innerHTML = borrow.borrowDate;
                    cell4.innerHTML = borrow.returnDate;
                    cell5.innerHTML = `<button class="edit-btn" onclick="openEditBorrowModal(${index})">编辑</button><button class="delete-btn" onclick="deleteBorrow(${index})">删除</button>`;
                }
            });
        }

        // 搜索读者
        function searchReaders() {
            let searchTerm = document.getElementById('readerSearch').value.toLowerCase();
            let readers = JSON.parse(localStorage.getItem('readers')) || [];
            let readerTable = document.getElementById('readerTable').getElementsByTagName('tbody')[0];
            readerTable.innerHTML = '';
            readers.forEach((reader, index) => {
                if (reader.name.toLowerCase().includes(searchTerm)) {
                    let row = readerTable.insertRow();
                    let cell1 = row.insertCell(0);
                    let cell2 = row.insertCell(1);
                    let cell3 = row.insertCell(2);
                    cell1.innerHTML = reader.name;
                    cell2.innerHTML = reader.contact;
                    cell3.innerHTML = `<button class="edit-btn" onclick="openEditReaderModal(${index})">编辑</button><button class="delete-btn" onclick="deleteReader(${index})">删除</button>`;
                }
            });
        }

        // 公告管理
        let currentAnnouncementIndex = null;

        function openAddAnnouncementModal() {
            currentAnnouncementIndex = null;
            document.getElementById('announcementTitle').value = '';
            document.getElementById('announcementContent').value = '';
            document.getElementById('addAnnouncementModal').style.display = 'block';
        }

        function openEditAnnouncementModal(index) {
            currentAnnouncementIndex = index;
            let announcements = JSON.parse(localStorage.getItem('announcements')) || [];
            let announcement = announcements[index];
            document.getElementById('announcementTitle').value = announcement.title;
            document.getElementById('announcementContent').value = announcement.content;
            document.getElementById('addAnnouncementModal').style.display = 'block';
        }

        function closeAddAnnouncementModal() {
            document.getElementById('addAnnouncementModal').style.display = 'none';
        }

        function saveAnnouncement() {
            let announcements = JSON.parse(localStorage.getItem('announcements')) || [];
            let title = document.getElementById('announcementTitle').value;
            let content = document.getElementById('announcementContent').value;
            let time = new Date().toLocaleString();
            if (title && content) {
                if (currentAnnouncementIndex!== null) {
                    announcements[currentAnnouncementIndex] = { title, content, time };
                } else {
                    announcements.push({ title, content, time });
                }
                localStorage.setItem('announcements', JSON.stringify(announcements));
                initTables();
                closeAddAnnouncementModal();
            }
        }

        function deleteAnnouncement(index) {
            let announcements = JSON.parse(localStorage.getItem('announcements')) || [];
            announcements.splice(index, 1);
            localStorage.setItem('announcements', JSON.stringify(announcements));
            initTables();
        }

        // 会员等级管理
        let currentMemberLevelIndex = null;

        function openAddMemberLevelModal() {
            currentMemberLevelIndex = null;
            document.getElementById('memberLevel').value = '';
            document.getElementById('borrowQuantity').value = '';
            document.getElementById('borrowDuration').value = '';
            document.getElementById('addMemberLevelModal').style.display = 'block';
        }

        function openEditMemberLevelModal(index) {
            currentMemberLevelIndex = index;
            let memberLevels = JSON.parse(localStorage.getItem('memberLevels')) || [];
            let memberLevel = memberLevels[index];
            document.getElementById('memberLevel').value = memberLevel.level;
            document.getElementById('borrowQuantity').value = memberLevel.borrowQuantity;
            document.getElementById('borrowDuration').value = memberLevel.borrowDuration;
            document.getElementById('addMemberLevelModal').style.display = 'block';
        }

        function closeAddMemberLevelModal() {
            document.getElementById('addMemberLevelModal').style.display = 'none';
        }

        function saveMemberLevel() {
            let memberLevels = JSON.parse(localStorage.getItem('memberLevels')) || [];
            let level = document.getElementById('memberLevel').value;
            let borrowQuantity = document.getElementById('borrowQuantity').value;
            let borrowDuration = document.getElementById('borrowDuration').value;
            if (level && borrowQuantity && borrowDuration) {
                if (currentMemberLevelIndex!== null) {
                    memberLevels[currentMemberLevelIndex] = { level, borrowQuantity, borrowDuration };
                } else {
                    memberLevels.push({ level, borrowQuantity, borrowDuration });
                }
                localStorage.setItem('memberLevels', JSON.stringify(memberLevels));
                initTables();
                closeAddMemberLevelModal();
            }
        }

        function deleteMemberLevel(index) {
            let memberLevels = JSON.parse(localStorage.getItem('memberLevels')) || [];
            memberLevels.splice(index, 1);
            localStorage.setItem('memberLevels', JSON.stringify(memberLevels));
            initTables();
        }

        // 页面加载完成后初始化表格
        window.onload = function () {
            initTables();
        };
    </script>
</body>

</html>